<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>注册</title>
        <link rel="stylesheet" type="text/css" href="css/common.css">
        <link rel="stylesheet" href="css/register.css">
		<!--导入jquery-->
		<script src="js/jquery-3.3.1.js"></script>
		<script>

			/**验证用户名*/
			function checkUsername() {
				//获取表单中的数据
				var username = $("#username").val();
				//定义正则表达式（8-20个字符）
				var reg_username=/^\w{8,20}$/;
				//进行验证
				var flag = reg_username.test(username);
				if (flag){
					//符合规则
					$("#username").css("border","");
				}else{
					//不符合规则,改变输入框的颜色
					$("#username").css("border","1px solid red");
				}
				return flag;

			}
			/**验证密码*/
			function checkPassWord() {
				//获取表单中的数据
				var password = $("#password").val();
				//定义正则表达式（8-20个字符）
				var reg_password=/^\w{6,20}$/;
				//进行验证
				var flag = reg_password.test(password);
				if (flag){
					//符合规则
					$("#password").css("border","");
				}else{
					//不符合规则,改变输入框的颜色
					$("#password").css("border","1px solid red");
				}
				return flag;

			}
			/**验证邮箱*/
			function checkEmail(){
				var email = $("#email").val();
				//邮箱的正则表达式
				var reg_email=/^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/;
				var flag = reg_email.test(email);
				if (flag){
					//符合规则
					$("#email").css("border","");
				}else{
					//不符合规则,改变输入框的颜色
					$("#email").css("border","1px solid red");
				}
				return flag
			}
			//验证姓名
			function checkName(){
				var name = $("#name").val();
				//姓名的输入判断不能为空
				var flag=(name!="");
				if (flag){
					$("#name").css("border","");
				}else{
					$("#name").css("border","1px solid red");
				}
				return flag;

			}
			//验证手机号
			function checkTelephone(){
				var telephone = $("#telephone").val();
				var reg_telephone=/^1[0-9]{10}$/;
				var flag = reg_telephone.test(telephone);
				if (flag){
					//符合规则
					$("#telephone").css("border","");
				}else{
					//不符合规则,改变输入框的颜色
					$("#telephone").css("border","1px solid red");
				}
				return flag;
			}
			//验证出生日期
			function checkBirthday(){
				var birthday = $("#birthday").val();
				var flag=(birthday!="");
				if (flag){
					$("#birthday").css("border","");
				}else{
					$("#birthday").css("border","1px solid red");
				}
				return flag;
			}
			//验证验证码
			function checkCode(){
				var check = $("#check").val();
				var flag=(check!="");
				if (flag){
					$("#check").css("border","");
				}else{
					$("#check").css("border","1px solid red");
				}
				return flag;
			}

			$(function () {
				//提交时进行表单的验证
				$("#registerForm").submit(function () {

					var flag=checkUsername()&&checkPassWord()&&checkEmail()&&checkName()&&checkTelephone()&&checkBirthday()&&checkCode();
					if (flag){
						//$(this).serialize()=
						alert($(this).serialize());
                        //"username":"123456","password":"123456","name":"柴和程"
						//向服务器发送数据
						$.post("user/registerUserServlet",$(this).serialize(),function (data) {
							//data可能的数据：flag:false,errorMsg:"注册失败"
							alert(data);
							if(data.flag){
								//注册成功，跳转页面
								location.href="register_ok.html";
							}else{
								//注册失败
								$("#error_msg").html(data.errorMsg);
								alert(data.errorMsg);
							}
						},"JSON");
					}
					//不使用表单进行提交，表单提交会使页面进行刷新，导致无法执行ajax的回调函数
					return false;

				})
				//鼠标离焦事件的进行表单的验证
				/*$("#username").blur(checkUsername);
				$("#password").blur(checkPassWord);
				$("#email").blur(checkEmail);
				$("#name").blur(checkName);
				$("#telephone").blur(checkTelephone);
				$("#birthday").blur(checkBirthday);*/
				$("#check").blur(checkCode);
			});
		</script>
    </head>
	<body>
	<!--引入头部-->
	<div id="header"></div>
        <!-- 头部 end -->
    	<div class="rg_layout">
    		<div class="rg_form clearfix">
    			<div class="rg_form_left">
    				<p>新用户注册</p>
    				<p>USER REGISTER</p>
    			</div>
    			<div class="rg_form_center">
					<!--错误信息提示框-->
					<div id="error_msg" class="error_msg"></div>
					<!--注册表单-->
    				<form id="registerForm">
						<!--提交处理请求的标识符-->
						<input type="hidden" name="action" value="register">
    					<table style="margin-top: 25px;">
    						<tr>
    							<td class="td_left">
    								<label for="username">用户名</label>
    							</td>
    							<td class="td_right">
    								<input type="text" id="username" name="username" placeholder="请输入账号">
    							</td>
    						</tr>
    						<tr>
    							<td class="td_left">
    								<label for="password">密码</label>
    							</td>
    							<td class="td_right">
    								<input type="text" id="password" name="password" placeholder="请输入密码">
    							</td>
    						</tr>
    						<tr>
    							<td class="td_left">
    								<label for="email">Email</label>
    							</td>
    							<td class="td_right">
    								<input type="text" id="email" name="email" placeholder="请输入Email">
    							</td>
    						</tr>
    						<tr>
    							<td class="td_left">
    								<label for="name">姓名</label>
    							</td>
    							<td class="td_right">
    								<input type="text" id="name" name="name" placeholder="请输入真实姓名">
    							</td>
    						</tr>
    						<tr>
    							<td class="td_left">
    								<label for="telephone">手机号</label>
    							</td>
    							<td class="td_right">
    								<input type="text" id="telephone" name="telephone" placeholder="请输入您的手机号">
    							</td>
    						</tr>
    						<tr>
    							<td class="td_left">
    								<label for="sex">性别</label>
    							</td>
    							<td class="td_right gender">
    								<input type="radio" id="sex" name="sex" value="男" checked> 男
    								<input type="radio" name="sex" value="女"> 女
    							</td>
    						</tr>
    						<tr>
    							<td class="td_left">
    								<label for="birthday">出生日期</label>
    							</td>
    							<td class="td_right">
    								<input type="date" id="birthday" name="birthday" placeholder="年/月/日">
    							</td>
    						</tr>
    						<tr>
    							<td class="td_left">
    								<label for="check">验证码</label>
    							</td>
    							<td class="td_right check">
    								<input type="text" id="check" name="check" class="check">
    								<img src="checkCode" height="32px" alt="" onclick="changeCheckCode(this)">
									<script type="text/javascript">
										//图片点击事件
										function changeCheckCode(img) {
											img.src="checkCode?"+new Date().getTime();
                                        }
									</script>
    							</td>
    						</tr>
    						<tr>
    							<td class="td_left"> 
    							</td>
    							<td class="td_right check"> 
    								<input type="submit" class="submit" value="注册">
									<!--<button class="submit" >注册</button>-->
									<span id="msg" style="color: red;"></span>
    							</td>
    						</tr>
    					</table>
    				</form>
    			</div>
    			<div class="rg_form_right">
    				<p>
    					已有账号？
    					<a href="#">立即登录</a>
    				</p>
    			</div>
    		</div>
    	</div>
        <!--引入尾部-->
    	<div id="footer"></div>
		<!--导入布局js，共享header和footer-->
		<script type="text/javascript" src="js/include.js"></script>
    	
    </body>
</html>